<template>
    <div class="container person-info">
        <div class="header">
            <el-button
                    type="primary"
                    @click="back"
            >返回</el-button>
        </div>
        <div class="main border">
            <el-form
                    :model="information"
                    label-width="180px"
                    class=""
            >
                <el-form-item
                        label="头像："
                        prop="avatarKey"
                >
                        <img
                                v-if="avatarUrl"
                                :src="avatarUrl"
                                class="avatar"
                                style="width: 150px;"
                        >
                </el-form-item>
                <el-form-item
                        label="用户身份:"
                        prop="userType"
                >
                    {{userTypeList.filter( item => {return item.value == information.userType}) && userTypeList.filter( item => {return item.value == information.userType}).length ? userTypeList.filter( item => {return item.value == information.userType})[0].label : '暂无'}}
                </el-form-item>
                <el-form-item
                        label="个人昵称/团队昵称:"
                        prop="userName"
                >
                    {{information.userName}}
                </el-form-item>
                <el-form-item
                        label="手机号"
                        prop="mobile"
                >
                    {{information.mobile}}
                </el-form-item>
                <el-form-item
                        label="服务地址"
                >
                    <!--<el-button type="primary" @click="$router.push('/serviceAddressList?id='+id)">查看更多</el-button>-->
                    <!--<el-button type="primary" @click="dialogVisible = true">新增地址</el-button>-->
                    <ul v-if="addressList && addressList.length">
                        <li v-for="(item, index) in addressList" :key="index">{{index+1}}.{{item.address}}</li>
                    </ul>
                    <div v-else>暂无</div>
                </el-form-item>
                <!--<div class="sub_title">服务信息</div>-->
                <el-form-item
                        label="所在社区"
                        prop="serverInfoSaveParam.theCommunity"
                >
                    {{information.serverInfoSaveParam.theCommunity}}
                </el-form-item>
                <el-form-item
                        label="服务社区"
                        prop="serverInfoSaveParam.communityService"
                >
                   {{information.serverInfoSaveParam.communityService}}
                </el-form-item>
                <el-form-item
                        label="家庭地址"
                        prop="serverInfoSaveParam.homeAddress"
                >
                    {{information.serverInfoSaveParam.homeAddress}}
                </el-form-item>
                <el-form-item
                        label="技能描述"
                        prop="serverInfoSaveParam.skillsToDescribe"
                >
                    {{information.serverInfoSaveParam.skillsToDescribe}}
                </el-form-item>
                <el-form-item
                        label="身份证正面"
                        prop="identitySaveParam.idCardPositive"
                >
                    <img
                            v-if="imageUrl1"
                            :src="imageUrl1"
                            class="avatar"
                            style="width: 150px;"
                    >
                </el-form-item>
                <el-form-item
                        label="身份证反面"
                        prop="identitySaveParam.idCardReverse"
                >
                    <img
                            v-if="imageUrl2"
                            :src="imageUrl2"
                            class="avatar"
                            style="width: 150px;"
                    >
                </el-form-item>
                <el-form-item
                        label="个人照"
                        prop="identitySaveParam.personalPicture"
                >
                    <img
                            v-if="imageUrl3"
                            :src="imageUrl3"
                            class="avatar"
                            style="width: 150px;"
                    >
                </el-form-item>
                <!--<div class="sub_title">基本信息</div>-->
                <el-form-item
                        label="真实姓名"
                        prop="trueName"
                >
                    {{information.trueName}}
                </el-form-item>
                <el-form-item
                        label="性别"
                        prop="sex"
                >
                    {{information.sex === '1' ? '男': (information.sex === '0' ? '女' : '保密')}}
                </el-form-item>
                <el-form-item
                        label="生日"
                        prop="birthday"
                >
                    {{information.birthday}}
                </el-form-item>
                <el-form-item
                        label="学历"
                        prop="education"
                >
                    {{information.education}}
                </el-form-item>
                <el-form-item
                        label="政治面貌"
                        prop="politicsStatus"
                >
                    {{information.politicsStatus === 'member' ? '团员' : (information.politicsStatus === 'crowd' ? '群众' : '党员')}}
                </el-form-item>
                <el-form-item
                        label="职业"
                        prop="professional"
                >
                    {{information.professional}}
                </el-form-item>
                <el-form-item
                        label="工作单位"
                        prop="company"
                >
                    {{information.company}}
                </el-form-item>
                <el-form-item
                        label="就读学校"
                        prop="school"
                >
                   {{information.school}}
                </el-form-item>
                <el-form-item
                        label="通讯地址"
                        prop="address"
                >
                    {{information.address}}
                </el-form-item>
                <el-form-item
                        label="邮编"
                        prop="postcode"
                >
                    {{information.postcode}}
                </el-form-item>
                <el-form-item
                        label="电子邮箱"
                        prop="email"
                >
                    {{information.email}}
                </el-form-item>

            </el-form>
            <div style="margin-left: 180px;margin-top: 20px;">
                <el-button
                        type="primary"
                        @click="$router.back()"
                >返回</el-button>
            </div>

            <el-dialog title="新增服务地址" :visible.sync="dialogVisible">
                <el-form>
                    <el-form-item label="所在地区" label-width="120px">
                        <!--<el-input v-model="addressForm.address" id="tipinput" autocomplete="off"></el-input>-->
                        <!--<el-button type="primary" @click="onSearchResult">搜索</el-button>-->
                        <el-amap-search-box class="search-box" :search-option="searchOption" :on-search-result="onSearchResult"></el-amap-search-box>
                        <div class="amap-page-container">
                            <!--<el-amap-search-box class="search-box" :search-option="searchOption" :on-search-result="onSearchResult"></el-amap-search-box>-->
                            <el-amap vid="amapDemo" :center="mapCenter" :zoom="12" class="amap-demo">
                                <el-amap-marker v-for="(marker, index) in markers" :position="marker" :key="index"></el-amap-marker>
                            </el-amap>
                        </div>
                    </el-form-item>
                    <el-form-item label="详细地址" label-width="120px">
                        <el-input v-model="addressForm.detailedAddress" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="handleSaveAddress">确 定</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
  let CONSTANT = require("../../constant/constant.js");
  let common = require("../../common.js");
  import $ from "jquery";
  export default {
    data() {
      return {
        url: "broadcastEdit",
        id: "",
        isEdit: false,
        currentPage: 1,
        upLoadUrl: "",
        // 单张封面
        coverImage: "",
        information: {
          "address": "",
          "approveStatus": "",
          "avatarKey": "",
          "birthday": "",
          "company": "",
          "education": "",
          "email": "",
          "id": '',
          "isDisable": "",
          "mobile": "",
          "password": "",
          "politicsStatus": "",
          "postcode": "",
          "professional": "",
          "referrer": "",
          "referrerMobile": "",
          "school": "",
          "serverInfoSaveParam": {
            "communityService": "",
            "homeAddress": "",
            "skillsToDescribe": "",
            "theCommunity": "",
            "userId": null
          },
          "sex": '',
          "trueName": "",
          "userName": "",
          "userType": "",
          "identitySaveParam": {
            "idCardPositive": "",
            "idCardReverse": "",
            "personalPicture": ""
          },
        },
        addressForm: {
          "address": "",
          "detailedAddress": "",
          "id": null,
          "latitude": null,
          "longitude": null
        },
        sortArr: [],
        loading: false,
        type:'',
        userTypeList: [{
          label: '全部',
          value: ''
        },{
          label: '个人会员',
          value: 'personal'
        }, {
          label: '团队会员',
          value: 'team'
        }],
        avatarUrl: '',
        dialogVisible: false,
        markers: [
          [121.59996, 31.197646],
          [121.40018, 31.197622],
          [121.69991, 31.207649]
        ],
        searchOption: {
          city: '上海',
          citylimit: false
        },
        mapCenter: [121.59996, 31.197646],
        addressList: [],
        serviceList: [],
        imageUrl1: '',
        imageUrl2: '',
        imageUrl3: ''
      };
    },
    components: {
      "bg-editor": () => import("../common/bg-editor.vue")
    },
    created() {

    },
    mounted() {
      this.currentPage = this.$router.currentRoute.query.currentPage
        ? this.$router.currentRoute.query.currentPage
        : 1;
      this.id = this.$router.currentRoute.query.id;
      if (this.id) {
        this.getDetail();
        this.getAddressList()
      }
      this.getServiceList();
    },
    methods: {
      handleClick(e) {
        this.$router.push(`/${e.name}`);
      },
      getDetail: function() {
        let url = CONSTANT.URL.USER.detail;
        common.get(url, this.id, res => {
          if (res.status == 200) {
            let data = res.data.bussData;
            this.information = {...this.information, ...data};
            this.information.serverInfoSaveParam = data.appUserServerInfoDTO ? {
              "communityService": data.appUserServerInfoDTO.communityService,
              "homeAddress": data.appUserServerInfoDTO.homeAddress,
              "skillsToDescribe": data.appUserServerInfoDTO.skillsToDescribe,
              "theCommunity": data.appUserServerInfoDTO.theCommunity,
              "userId": data.appUserServerInfoDTO.userId
            } : {
              communityService:"",
              homeAddress: '',
              skillsToDescribe: '',
              theCommunity: '',
              userId: null
            }
            this.information.sex = JSON.stringify(data.sex)
            console.log(this.information)
            this.avatarUrl = data.avatarUrl;
            this.imageUrl1 = data.identityInfo ? data.identityInfo.idCardPositiveUrl : ''
            this.imageUrl2 = data.identityInfo ? data.identityInfo.idCardReverseUrl : ''
            this.imageUrl3 = data.identityInfo ? data.identityInfo.personalPictureUrl : ''
          }
        });
      },
      editorInfo(val) {
        this.information.content = val;
      },
      back() {
        this.$router.back()
      },
      handleSaveAddress() {
        let url = CONSTANT.URL.ADDRESS.save
        this.addressForm.userId = this.id
        common.post(url, this.addressForm, res => {
          if(res.status == 200) {
            this.$message({
              type: "success",
              message:'保存成功'
            })
            this.dialogVisible = false;
            this.getAddressList()
          }
        })
      },
      getAddressList() {
        let url = CONSTANT.URL.SERVER.list
        common.post(url, {
          pageIndex: 1,
          pageSize: 100,
          userId: this.id
        }, res => {
          this.addressList = res.data.bussData;
        })
      },
      getServiceList() {
        let url = CONSTANT.URL.COMMUNITY.list
        common.post(url, {
          pageIndex: 1,
          pageSize: 1000,
        }, res => {
          this.serviceList = res.data.bussData;
        })
      },
      getList: function() {
      },
      submitForm(formName) {
        this.$refs[formName].validate(valid => {
          if (valid) {
            let url = CONSTANT.URL.USER.save;
            common.post(url, this.information, res => {
              if (res.status == 200) {
                this.$message({
                  type: "success",
                  message: "保存成功!"
                });
                this.$router.back()
              } else {
                this.$message({
                  type: "error",
                  message: res.msg
                });
              }
            });
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      },
      linkToList() {
        this.$router.push("/broadcastList");
      },
      myUpload(content) {}, // 重写覆盖上传方法
      beforeCoverUpload(file) {
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isLt2M) {
          this.$message.error("上传头像图片大小不能超过 2MB!");
          return false;
        }
        let url =
          CONSTANT.URL.COMMON.upload + "?suffix="+
          file.name.split(".")[1] +
          "&contentType=" +
          file.type;
        // suffix:file.name.split(".")[1],   // 文件后缀  png
        // contentType:file.type             // 文件类型  image/png
        common.post(url, "", res => {
          let data = res.data.bussData;
          common.uploadFile(data.uploadUrl, file, file.type, res => {
            this.information.avatarKey = data.fileKey;
            this.avatarUrl = data.downloadUrl;
          });
        });
      },
      beforeCoverUpload1(file) {
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isLt2M) {
          this.$message.error("上传头像图片大小不能超过 2MB!");
          return false;
        }
        let url =
          CONSTANT.URL.COMMON.upload + "?suffix="+
          file.name.split(".")[1] +
          "&contentType=" +
          file.type;
        // suffix:file.name.split(".")[1],   // 文件后缀  png
        // contentType:file.type             // 文件类型  image/png
        common.post(url, "", res => {
          let data = res.data.bussData;
          common.uploadFile(data.uploadUrl, file, file.type, res => {
            this.information.identitySaveParam.idCardPositive = data.fileKey;
            this.imageUrl1 = data.downloadUrl;
          });
        });
      },
      beforeCoverUpload2(file) {
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isLt2M) {
          this.$message.error("上传头像图片大小不能超过 2MB!");
          return false;
        }
        let url =
          CONSTANT.URL.COMMON.upload + "?suffix="+
          file.name.split(".")[1] +
          "&contentType=" +
          file.type;
        // suffix:file.name.split(".")[1],   // 文件后缀  png
        // contentType:file.type             // 文件类型  image/png
        common.post(url, "", res => {
          let data = res.data.bussData;
          common.uploadFile(data.uploadUrl, file, file.type, res => {
            this.information.identitySaveParam.idCardReverse = data.fileKey;
            this.imageUrl2 = data.downloadUrl;
          });
        });
      },
      beforeCoverUpload3(file) {
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isLt2M) {
          this.$message.error("上传头像图片大小不能超过 2MB!");
          return false;
        }
        let url =
          CONSTANT.URL.COMMON.upload + "?suffix="+
          file.name.split(".")[1] +
          "&contentType=" +
          file.type;
        // suffix:file.name.split(".")[1],   // 文件后缀  png
        // contentType:file.type             // 文件类型  image/png
        common.post(url, "", res => {
          let data = res.data.bussData;
          common.uploadFile(data.uploadUrl, file, file.type, res => {
            this.information.identitySaveParam.personalPicture = data.fileKey;
            this.imageUrl3 = data.downloadUrl;
          });
        });
      },
      addMarker: function() {
        let lng = 121.5 + Math.round(Math.random() * 1000) / 10000;
        let lat = 31.197646 + Math.round(Math.random() * 500) / 10000;
        this.markers.push([lng, lat]);
      },
      onSearchResult(pois) {
        console.log(pois)
        if (pois.length > 0) {
          this.markers.push([pois[0].lng, pois[0].lat]);
          this.mapCenter = [pois[0].lng, pois[0].lat];
          this.addressForm = {
            ...this.addressForm,
            "address": pois[0].name,
            "latitude": pois[0].lat,
            "longitude": pois[0].lng
          }
        }
      }
    }
  };
</script>
<style lang="scss">
    .person-info {
        .el-form-item__content {
            line-height: 40px!important;
        }
    }
</style>
